<template>
  <div>
      <div id="part1_container">
        <p class="p30">※商城实行二级消费奖励模式。</p>
		<p class="p30">平台设有购物返现，分享收益，分润收益。</p>
		<p class="p30">动动手指，您不仅能省钱，还能赚钱！惊喜多多！</p>
		<p class="p30">※详情见公众号“i大学”中“会员收益”。</p>
        <p class="p30 textCenter" style="margin: .3rem">请微信扫一扫或<span class="p36 colored">截图</span>分享二维码</p>
      </div>
      <div id="code_container">
          <div id="code_border">
              <div id="bang">i大学</div>
              <div id="code_dash">
                  <div>
                      <div style=".2rem auto">
                          <img class="vertical" :src="user.head"
                          style="width:1.3rem;height:1.3rem;marginRight:.3rem">
                          <div class="vertical p28">
                              <p style="color:#111">{{user.nickname}}</p>
                              <p>邀请码：<span class="colored">{{user.r_code}}</span></p>
                          </div>
                      </div>
                      <p class="p28" style="marginTop:.2rem">一个专门服务于高校学生的平台。致力于为高校学生提供最优质，最低价，最潮流的产品。</p>
                  </div>
                  <div id="code">
                      <img :src="`https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${user.ticket}`">
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'Share',
  computed:{
      ...mapGetters({
			user: 'user/userInfo'
		}),
  }
}
</script>
<style lang="less" scoped>
#part1_container{
    border-bottom: 2px solid #E4E4E4;
    padding: .4rem;
    background: #fff;
}
#code_container{
	padding: .3rem 0;
	text-align: center;
	position: relative;
	margin-top: .2rem;
}
#code_border{
    width: 8rem;
    height: 10.5rem;
    border: 2px solid #fb4a4a;
    padding: .4rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: .32rem;
}
	#bang{
		position: absolute;
		width: 6rem;
		height: 4.3rem;
		background: #fb4a4a;
		color: #fff;
		font-size: .45rem;
		border-radius: 100%;
		top: -3rem;
		left: 1rem;
		z-index: 10;
		padding: 3.4rem 0 0;
	}
	#code_border{
		width: 8rem;
		height: 10.5rem;
		border: 2px solid #fb4a4a;
		padding: .4rem;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		border-radius: .32rem;
	}
	#code_dash{
		width: 100%;
		height: 100%;
		border: 2px dashed #fb4a4a;
		border-radius: .28rem;
		padding: 1rem .8rem 0;
		text-align: left;
	}
	#code{
		width: 4.3rem;
		height: 4.3rem;
		background: #fff;
		border: 1px solid #fb4a4a;
		border-radius: 0.16rem;
		margin: .3rem auto;
	}
	#code img{
		width: 100%;
		height: 100%;
	}
</style>

